<ng-container *ngIf="formGroup" [formGroup]="formGroup">
    <div class="ama-form-fields-renderer-container">
        <mat-form-field *ngFor="let field of formFields"
                        [floatLabel]="'auto'"
                        [ngSwitch]="field.type"
                        [attr.data-automation-id]="field.key">
            <mat-label>{{ field.label | translate }}</mat-label>

            <input
                *ngSwitchCase="'text'"
                matInput
                [attr.data-automation-id]="'ama-form-fields-renderer-input-' + field.key"
                [placeholder]="field.label | translate"
                [type]="field.type"
                [errorStateMatcher]="matcher"
                [formControl]="getInputFormControl(field.key)"/>

            <input
                *ngSwitchCase="'number'"
                matInput
                [attr.data-automation-id]="'ama-form-fields-renderer-number-' + field.key"
                [placeholder]="field.label | translate"
                [type]="field.type"
                [errorStateMatcher]="matcher"
                [formControl]="getInputFormControl(field.key)"/>

            <textarea
                *ngSwitchCase="'textarea'"
                matInput
                [attr.data-automation-id]="'ama-form-fields-renderer-textarea-' + field.key"
                [placeholder]="field.label | translate"
                [type]="field.type"
                [errorStateMatcher]="matcher"
                [formControl]="getInputFormControl(field.key)"></textarea>

            <mat-select
                *ngSwitchCase="'dropdown'"
                [attr.data-automation-id]="'ama-form-fields-renderer-dropdown-' + field.key"
                [placeholder]="field.label | translate"
                [value]="field.defaultValue"
                [formControl]="getInputFormControl(field.key)">
                <mat-option
                    [attr.data-automation-id]="'ama-form-fields-renderer-dropdown-option-' + option.label"
                    *ngFor="let option of field.options" [value]="option.value">
                        {{ option.label | translate }}
                </mat-option>
                <ng-container *ngIf="field.groupOptions">
                    <mat-optgroup
                        [attr.data-automation-id]="'ama-form-fields-renderer-dropdown-group-' + group.label"
                        [label]="group.label | translate"
                        *ngFor="let group of field.groupOptions">
                        <mat-option
                            [attr.data-automation-id]="'ama-form-fields-renderer-dropdown-group-option-' + option.label"
                            *ngFor="let option of group.options" [value]="option.value">
                                {{ option.label | translate }}
                        </mat-option>
                    </mat-optgroup>
                </ng-container>
            </mat-select>

            <mat-error *ngFor="let validator of field.validators">
                <div *ngIf="getInputFormControl(field.key) | formRendererFieldHasError: validator.type"
                    [attr.data-automation-id]="'ama-form-fields-renderer-error-' + validator.type + '-' + field.key">
                    {{ field.label | formRendererFieldErrorMessage: validator }}
                </div>
            </mat-error>
        </mat-form-field>
    </div>
</ng-container>
